<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配送员获取顾客端OpenID演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .step {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background: #f9f9f9;
        }
        .step h3 {
            margin-top: 0;
            color: #333;
        }
        .button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .button:hover {
            background: #0056b3;
        }
        .success {
            background: #28a745;
        }
        .warning {
            background: #ffc107;
            color: #333;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
            background: #e9ecef;
        }
        .code {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>配送员获取顾客端OpenID演示</h1>
        <p>此演示展示了配送员如何通过跳转到顾客端小程序获取openid来解决微信支付分账问题。</p>
        
        <div class="step">
            <h3>步骤1: 配送员登录配送端小程序</h3>
            <p>配送员在配送端小程序进行微信登录</p>
            <button class="button" onclick="simulateDeliveryLogin()">模拟配送员登录</button>
            <div id="loginResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="step">
            <h3>步骤2: 检查是否需要获取顾客端OpenID</h3>
            <p>系统检查配送员是否已绑定顾客端openid</p>
            <div id="checkResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="step">
            <h3>步骤3: 跳转到顾客端小程序</h3>
            <p>如果需要，自动跳转到顾客端小程序进行静默登录</p>
            <button class="button warning" onclick="simulateJumpToCustomer()" id="jumpBtn" style="display:none;">跳转到顾客端小程序</button>
            <div id="jumpResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="step">
            <h3>步骤4: 获取顾客端OpenID</h3>
            <p>在顾客端小程序中静默登录并获取openid</p>
            <button class="button" onclick="simulateGetCustomerOpenid()" id="getOpenidBtn" style="display:none;">获取顾客端OpenID</button>
            <div id="openidResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="step">
            <h3>步骤5: 返回配送端小程序</h3>
            <p>自动或手动返回配送端小程序</p>
            <button class="button success" onclick="simulateReturnToDelivery()" id="returnBtn" style="display:none;">返回配送端</button>
            <div id="returnResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="step">
            <h3>技术实现要点</h3>
            <div class="code">
                <strong>后端接口:</strong><br>
                1. 配送端登录: POST /wechat/wxLogin<br>
                2. 顾客端获取openid: POST /wechat/getCustomerOpenid<br><br>
                <strong>前端跳转:</strong><br>
                wx.navigateToMiniProgram({<br>
                &nbsp;&nbsp;appId: '顾客端小程序appid',<br>
                &nbsp;&nbsp;path: '/pages/auth/openid?deliveryOpenid=xxx',<br>
                &nbsp;&nbsp;success: function(res) { ... }<br>
                })
            </div>
        </div>
        
        <button class="button" onclick="resetDemo()" style="margin-top: 20px;">重置演示</button>
    </div>
    
    <script>
        let currentStep = 0;
        let deliveryOpenid = 'delivery_' + Math.random().toString(36).substr(2, 9);
        let customerOpenid = null;
        
        function simulateDeliveryLogin() {
            const result = document.getElementById('loginResult');
            result.style.display = 'block';
            result.innerHTML = `
                <strong>登录成功!</strong><br>
                配送员OpenID: ${deliveryOpenid}<br>
                AccessToken: access_${Math.random().toString(36).substr(2, 9)}<br>
                <span style="color: orange;">检测到缺少顾客端OpenID，需要跳转获取</span>
            `;
            
            // 显示检查结果
            setTimeout(() => {
                const checkResult = document.getElementById('checkResult');
                checkResult.style.display = 'block';
                checkResult.innerHTML = `
                    <strong>检查结果:</strong><br>
                    needCustomerOpenid: true<br>
                    deliveryOpenid: ${deliveryOpenid}<br>
                    <span style="color: red;">需要跳转到顾客端小程序获取OpenID</span>
                `;
                
                document.getElementById('jumpBtn').style.display = 'inline-block';
            }, 1000);
        }
        
        function simulateJumpToCustomer() {
            const result = document.getElementById('jumpResult');
            result.style.display = 'block';
            result.innerHTML = `
                <strong>正在跳转...</strong><br>
                目标小程序: 顾客端小程序<br>
                跳转路径: /pages/auth/openid?deliveryOpenid=${deliveryOpenid}<br>
                <span style="color: blue;">跳转成功，进入顾客端小程序</span>
            `;
            
            document.getElementById('getOpenidBtn').style.display = 'inline-block';
        }
        
        function simulateGetCustomerOpenid() {
            customerOpenid = 'customer_' + Math.random().toString(36).substr(2, 9);
            const result = document.getElementById('openidResult');
            result.style.display = 'block';
            result.innerHTML = `
                <strong>获取OpenID成功!</strong><br>
                顾客端OpenID: ${customerOpenid}<br>
                调用接口: POST /wechat/getCustomerOpenid<br>
                参数: { code: 'wx_code_xxx', deliveryOpenid: '${deliveryOpenid}' }<br>
                <span style="color: green;">OpenID已保存到数据库</span>
            `;
            
            document.getElementById('returnBtn').style.display = 'inline-block';
        }
        
        function simulateReturnToDelivery() {
            const result = document.getElementById('returnResult');
            result.style.display = 'block';
            result.innerHTML = `
                <strong>返回配送端成功!</strong><br>
                配送员OpenID: ${deliveryOpenid}<br>
                顾客端OpenID: ${customerOpenid}<br>
                <span style="color: green;">✅ 分账问题已解决，可以正常进行微信支付分账</span>
            `;
        }
        
        function resetDemo() {
            const results = document.querySelectorAll('.result');
            results.forEach(result => result.style.display = 'none');
            
            const buttons = document.querySelectorAll('#jumpBtn, #getOpenidBtn, #returnBtn');
            buttons.forEach(btn => btn.style.display = 'none');
            
            deliveryOpenid = 'delivery_' + Math.random().toString(36).substr(2, 9);
            customerOpenid = null;
        }
    </script>
</body>
</html>